<template>
	<div>
		<el-form :model="form" label-position="left" label-width="80px">
			<el-form-item label="会员ID">
				{{ form.userId }}
			</el-form-item>
			<el-form-item label="头像">
				<el-upload
					class="avatar-uploader"
					:action="imgUrl"
					ref="upload"
					accept=".jpg,.jpeg,.png"
					:show-file-list="false"
					:headers="token"
					name="files"
					:on-success="handleAvatarSuccess"
					:before-upload="beforeAvatarUpload"
				>
					<img v-if="form.avatar != ''" :src="fileUrl + form.avatar" class="avatar" />
					<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
				</el-upload>
			</el-form-item>
			<el-form-item label="账号">
				{{ form.userName }}
			</el-form-item>
			<el-form-item label="邮箱">
				{{ form.email }}
			</el-form-item>
			<el-form-item label="手机">
				<el-input v-model="form.phonenumber" style="width: 180px" />
			</el-form-item>
			<el-form-item label="姓名">
				<el-input v-model="form.nickName" style="width: 90px" />
			</el-form-item>
			<el-form-item label="性别">
				<el-radio-group v-model="form.sex">
					<el-radio label="0">男</el-radio>
					<el-radio label="1">女</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="地区">
				<Address v-model:provinceId="form.provinceId" v-model:cityId="form.cityId" v-model:areaId="form.areaId" />
			</el-form-item>
			<el-form-item label="地址">
				<el-input v-model="form.userAddress" style="width: 380px" />
			</el-form-item>
			<el-form-item label="邮编">
				<el-input v-model="form.postalCode" style="width: 180px" />
			</el-form-item>
			<el-form-item label="部门">
				<el-tree-select
					style="width: 450px"
					v-model="form.deptId"
					:data="deptOptions"
					:props="{ value: 'id', label: 'label', children: 'children' }"
					value-key="id"
					placeholder="请选择归属部门"
					check-strictly
				/>
			</el-form-item>
			<el-form-item label="职位">
				<el-select v-model="form.postIds" multiple placeholder="请选择" style="width: 450px">
					<el-option
						v-for="item in postOptions"
						:key="item.postId"
						:label="item.postName"
						:value="item.postId"
						:disabled="item.status == 1"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup name="userInfo">
import { deptTreeSelect } from '@/api/system/user'
import Address from '@/components/Address/index'
import { reactive } from 'vue'
import { getConfigKey } from '@/api/system/config'
import { getToken } from '@/utils/auth'
import { updateUser, selectInfo } from '@/api/index/index'
const { proxy } = getCurrentInstance()
const imgUrl = ref('')
getConfigKey('img_upload').then((response) => {
	imgUrl.value = response.msg
})
const fileUrl = ref('')
getConfigKey('sys.upload').then((response) => {
	fileUrl.value = response.msg
})
const token = { Authorization: 'Bearer ' + getToken() }
const form = reactive({
	userId: '',
	userName: '',
	nickName: '',
	phonenumber: '',
	avatar: '',
	sex: '',
	provinceId: undefined,
	cityId: undefined,
	areaId: undefined,
	userAddress: '',
	deptId: '',
	postalCode: '',
	email: '',
	postIds: [],
	roleIds: []
})
const deptOptions = ref([])
deptTreeSelect().then((res) => {
	deptTreeSelect().then((response) => {
		deptOptions.value = response.data
	})
})
const postOptions = ref([])
selectInfo().then((res) => {
	for (let item in form) {
		form[item] = res.data.user[item]
	}
	form['postIds'] = res.data['postIds']
	form['roleIds'] = res.data['roleIds']
	postOptions.value = res.data.posts
})
const upload = ref('')
const handleAvatarSuccess = (response) => {
	form.avatar = response.data[0]
}
const beforeAvatarUpload = (file) => {}

const onSubmit = () => {
	updateUser(form).then((res) => {
		proxy.$modal.msgSuccess('修改成功！')
	})
}
</script>

<style scoped>
.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
	border: 1px dashed #dcdfe6;
}
.avatar-uploader {
	border: 1px dashed #dcdfe6;
	height: 178px;
}
.avatar-uploader .el-upload {
	border: 1px dashed #dcdfe6;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: #dcdfe6;
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
